<#include "portlet-layout.ftl"/>
<@layout>
  <div ng-controller="TodoCtrl" >
    <input type="text" id="newTodo" name="content" placeholder="<@s.message code='todo.ui.content.placeholder' />,<@s.message code='todo.ui.content.tooltip'/>" ng-keypress="saveTodo($event)" ng-model="newTodo" class="input-block-level" style="margin: 2px 0"/>
      <table class="table table-striped table-hover table-condensed ng-cloak" style="width: 100%">
        <col width="24"/>
        <tbody>
          <tr ng-repeat="todo in todoList">
            <td><input type="checkbox" ng-click="changeStatusDone($index, todo.status);" /></td>
            <td><label id="todo_{{todo.id}}">          
               <span ng-if="-2==todo.status" class="badge badge-warning"><@s.message code="todo.status.-2" /></span>
               <span ng-if="-1==todo.status" class="badge badge-inverse"><@s.message code="todo.status.-1" /></span>
               <span ng-if="1==todo.status" class="badge badge-info"><@s.message code="todo.status.1" /></span>
               <span ng-if="2==todo.status" class="badge badge-important"><@s.message code="todo.status.2" /></span>
               <span ng-if="3==todo.status" class="badge badge-success"><@s.message code="todo.status.3" /></span>                              
               &nbsp;
               {{todo.content}}</label>
            </td>
           </tr>
          </tbody>
        </table>
        <div class="more-div" ng-click="showMore();"><span><@s.message code='btn.more' /></span> <i class="icon-chevron-down icon-large"></i></div>
</div>       
<script type="text/javascript">
function TodoCtrl($scope, $http, $filter) {
        $scope.newTodo = "";
        $scope.todoList = [];
        var pageIndex = 2;
        
        $http.post("${contextPath}/personal/todo/getTopN.json").success(function(data) {
          var todoList = data.todoList;          
          $scope.todoList = todoList;
        });
        
        $scope.saveTodo = function(event){
          if(event.keyCode !== 13) return;
          var content = $scope.newTodo;
          if(content==null || ""==content.trim())
          {
            layer.tips("<@s.messageArgs code='error.emptyField' args=' '/>", $("#newTodo"));
          }  
          else {
            $http.post("${contextPath}/personal/todo/save.json", {"content": content}).success(function(data) {
              $scope.todoList.unshift(data.todo);
              $scope.newTodo = "";
            });   
          }
        }
        
        $scope.changeStatusDone = function(index, status){    
          var todo = $scope.todoList[index];
          if(status!=3)
            status=3;
          else
            status=2;
          $http.post("${contextPath}/personal/todo/updateStatus.json", {"id": todo.id, "status":status}).success(function(data) {
            todo.status = status;
            if(status==3)
            {
              $("#todo_"+todo.id).addClass("f-deleted");
            }
            else
            {
              $("#todo_"+todo.id).removeClass("f-deleted");
            }
          });         
        }
        
        $scope.showMore = function(){
          $http.post("${contextPath}/personal/todo/getTopN.json", {"pageIndex": pageIndex}).success(function(data) {
            var todoList = data.todoList;
            if(0==todoList.length)
            {
              $.webtools.notify({
                type: "notice",
                position: "center",
                delay: 1500,
                message: "<@s.message code='btn.more.nomore' />"			
              }); 
              return;
            }
            $.merge($scope.todoList, todoList);
            pageIndex++;
          });
        }        
      }
</script>
</@layout>                 